<script setup lang="ts">
import { useRouter } from "vue-router";
import { useList } from "./hook";
defineOptions({
  name: "Welcome"
});
const router = useRouter();
const { productList } = useList();
const jumprouter = appPath => {
  router.push(appPath);
};
</script>

<template>
  <div>
    <div
      v-for="(value, key) in productList"
      :key="key"
      style="margin-bottom: 20px"
    >
      <span style="font-size: 16px; font-weight: bold">{{
        value.sysClassInfo.className
      }}</span>
      <el-row :gutter="16" style="margin-top: 10px">
        <el-col v-for="(item, key) in value.appInfos" :key="key" :span="6">
          <div @click="jumprouter(item.appPath + item.id)" class="myCard">
            <div class="tpTitle">
              <IconifyIconOnline
                :icon="item.appImage"
                width="40px"
                height="40px"
                style="color: #409eff"
              />
              <div class="mainTitle">
                <div class="box">
                  {{ item.appName }}
                </div>
                <div class="boxx">访问次数：{{ item.useCount }}</div>
              </div>
            </div>
            <div class="btTitle">
              {{ item.appDescript }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style scoped>
.myCard:hover {
  background-color: rgb(212 208 208 / 60%);
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpTitle {
  display: flex;
  flex-direction: row;
}

.myCard {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  height: 85px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid #d8d5d5;
  border-radius: 10px;
}

.btTitle {
  margin-top: 10px;
  margin-left: 5px;
  overflow: hidden; /* 超出部分隐藏 */
  font-size: 12px;
  color: #616060;
  text-overflow: ellipsis; /* 使用省略符号 */
  white-space: nowrap; /* 文本不换行 */
}

.mainTitle {
  width: 100%;
  padding: 0 10px;
}

.box {
  height: 15px;
  margin-bottom: 8px;
  font-weight: bold;
  border: 0;
}

.boxx {
  height: 15px;
  font-size: 10px;
}
</style>
